<template>
  <div id="fkw_body">
    <div id="body_content">
      <div id="body_img"><img style="width: 800px" src="../assets/signin/lieche.png"></div>
      <div id="body_login">
        <div id="changeWay"><img @click="changLoginWay()" id="changeImg" src="../assets/login/wxLogin01.png"
                                 style="visibility: hidden"></div>
        <div id="weChatText" style="display: block;left: -127px;line-height: 28px;visibility: hidden"><img
          src="../assets/login/wechat.png"><span>微信安全登录</span></div>
        <div id="normalText" style="display: none">账号密码登录</div>
        <div id="w-n-arrow"></div>
        <div id="normalLogin" style="display: block">
          <div id="TabLoginWay">
            <div id="passwordLogin" @click="changePasswordLogin()" style="border-bottom: 2px solid #2f82ff">密码登录</div>
          </div>
          <div id="passwordText" style="display: block">
            <div id="passwordText_normal" style="display: block">
              <input v-model="username" id="num-mail-phone-login" type="text" placeholder="账号/邮箱/手机号码">
              <input v-model="password" id="passwordInput" type="password" placeholder="密码">
              <div id="n-m-p-img"></div>
              <div id="passwordInputImg"></div>
              <div id="hidePassword" style="position: absolute;margin-top: 85px" @click="showPassword()"><img
                id="seeHide" src="../assets/login/secret.png"></div>
            </div>
            <div id="passwordText_staff" style="display: none">
              <input id="numberInput" type="text" placeholder="账号">
              <input id="staffInput" type="text" placeholder="员工账号">
              <input id="inputPassword" type="password" placeholder="密码">
              <div id="numberInputImg"></div>
              <div id="staffInputImg"></div>
              <div id="inputPasswordImg"></div>
              <div id="wordHide" @click="passwordShow()"><img id="hideSee" src="../assets/login/secret.png"></div>
            </div>
            <div id="select-login-button">
              <div id="LoginButton">
                <div class="loginButton" @click="login">登&nbsp;&nbsp;录</div>
              </div>
            </div>
          </div>
          <div id="messageText" style="display: none">
            <div>
              <input id="mobileNumber" type="text" placeholder="手机号码">
              <div id="phoneImg"></div>
            </div>
            <div>
              <input id="mobileCode" type="text" maxlength="4" placeholder="短信码">
              <div id="CodeImg"></div>
            </div>
            <div id="mobileCodeButton">获取短信码</div>
            <div class="loginButton" @click="login">登&nbsp;&nbsp;录</div>
          </div>
        </div>
        <div id="weChatLogin" style="display: none"><img src="../assets/login/QRCode.png"></div>
        <div id="changeLoginWay"></div>
      </div>
      <div id="body_login_other">
        <span>其他帐号登录</span>
        <a href="#" id="login_other_img"><img src="../assets/login/qq.png"></a>
        <a href="" @click="$router.push('/register')" id="login_other_register">立即注册</a>
      </div>
      <div id="body_graw">
        <p>Copyright © 2020 广东海洋大学</p>
        <a href="#" id="graw_a">粤公网安备 44000504050715号</a>
        <a href="#">粤ICP备10435530号</a>
      </div>
    </div>
  </div>
</template>

<script>

import {loginApi} from "@/api/station/login";

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',

      a: 1,
      b: 1,
      c: 1,
      d: 1,
      x: 1,
      body_login: null,
      normalLogin: null,
      weChatLogin: null,
      changeImg: null,
      weChatText: null,
      normalText: null,

      passwordText: null,
      messageText: null,
      passwordLogin: null,
      messageLogin: null,
      staffLoginSelect: null,

      passwordText_normal: null,
      passwordText_staff: null,

      passwordInput: null,
      seeHide: null,

      inputPassword: null,
      hideSee: null,
    }
  },
  mounted() {
    this.body_login = document.getElementById('body_login')
    this.normalLogin = document.getElementById('normalLogin')
    this.weChatLogin = document.getElementById('weChatLogin')
    this.changeImg = document.getElementById('changeImg')
    this.weChatText = document.getElementById('weChatText')
    this.normalText = document.getElementById('normalText')

    this.passwordText = document.getElementById('passwordText')
    this.messageText = document.getElementById('messageText')
    this.passwordLogin = document.getElementById('passwordLogin')
    this.messageLogin = document.getElementById('messageLogin')
    this.staffLoginSelect = document.getElementById('staffLoginSelect')


    this.passwordText_normal = document.getElementById('passwordText_normal')
    this.passwordText_staff = document.getElementById('passwordText_staff')

    this.passwordInput = document.getElementById('passwordInput')
    this.seeHide = document.getElementById('seeHide')

    this.inputPassword = document.getElementById('inputPassword')
    this.hideSee = document.getElementById('hideSee')

  },
  methods: {
    login() {
      let data = {
        username: this.username,
        password: this.password,
      }
      if (!data.username || !data.password) {
        this.$errorMsg('请输入账号密码？')
        return
      }
      loginApi(data).then(result => {
        console.log(result.status);
        if (result.status === 200) {
          this.$successMsg(result.resultParam.message)
          this.$storeSet('setToken', result.resultParam.token)
          this.$router.push({name: 'home'})
        } else {
          console.log(result);
          this.$errorMsg(result.message)
        }
      }).catch(err => {
        this.$errorMsg(err.response.message)
      })
    },

    changLoginWay() {
      if (this.a === 1) {
        this.body_login.style.height = "362px";
        this.normalLogin.style.display = "none";
        this.weChatLogin.style.display = "block";
        this.changeImg.src = "/assets/login/userLogin01.png";
        this.weChatText.style.display = "none";
        this.normalText.style.display = "block";
        this.a++;
      } else {
        this.body_login.style.height = "362px";
        this.normalLogin.style.display = "block";
        this.weChatLogin.style.display = "none";
        this.changeImg.src = "/assets/login/wxLogin01.png";
        this.weChatText.style.display = "block";
        this.normalText.style.display = "none";
        this.a--;
      }
    },
    changePasswordLogin() {
      this.body_login.style.height = "362px";
      this.normalLogin.style.height = "297px";
      this.passwordText.style.display = "block";
      this.messageText.style.display = "none";
      this.passwordLogin.style.borderBottom = "2px solid #2f82ff";
      this.messageLogin.style.borderBottom = "0 solid #2f82ff";
      if (this.b === 2) {
        this.changeStaffLogin();
      }
    },
    changeMessageLogin() {
      this.body_login.style.height = "301px";
      this.normalLogin.style.height = "236px";
      this.passwordText.style.display = "none";
      this.messageText.style.display = "block";
      this.passwordLogin.style.borderBottom = "0 solid #2f82ff";
      this.messageLogin.style.borderBottom = "2px solid #2f82ff";
    },
    changeStaffLogin() {
      if (this.b === 1) {
        this.body_login.style.height = "423px";
        this.normalLogin.style.height = "312px";
        this.passwordText_normal.style.display = "none";
        this.passwordText_staff.style.display = "block";
        document.getElementById("input-label01").src = "/assets/login/agree.png";
        this.b++
      } else {
        this.body_login.style.height = "362px";
        this.normalLogin.style.height = "251px";
        this.passwordText_normal.style.display = "block";
        this.passwordText_staff.style.display = "none";
        this.document.getElementById("input-label01").src = "";
        this.b--;
      }
    },
    showPassword() {
      if (this.c === 1) {
        this.passwordInput.type = "text";
        this.seeHide.src = "/assets/login/seekey.png";
        this.c++;
      } else {
        this.passwordInput.type = "password";
        this.seeHide.src = "/assets/login/secret.png";
        this.c--;
      }
    },
    passwordShow() {
      if (this.d === 1) {
        this.inputPassword.type = "text";
        this.hideSee.src = "/assets/login/seekey.png";
        this.d++;
      } else {
        this.inputPassword.type = "password";
        this.hideSee.src = "/assets/login/secret.png";
        this.d--;
      }
    },
    changeAutoLogin() {
      if (this.x === 1) {
        document.getElementById("input-label02").src = "/assets/login/agree.png";
        this.x++;
      } else {
        document.getElementById("input-label02").src = "";
        this.x--;
      }
    }
  }
};
</script>
